<template>
  <el-dialog class="public-dialog" :title="titleOpt?.[queryForm?.document_type]" width="1000" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <vxe-grid v-bind="tableOptions" ref="tableRef" v-if="modelValue" />
    </div>
    <template #footer>
      <el-button type="primary" :loading="loading" @click="submit"> 确认 </el-button>
      <el-button @click="handleClose"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { ownerInventoryOrderDetail, basicInventoryCreateDiffDocument } from "@/api/salesInventory"
const emit = defineEmits(["submit", "handleClose"])
const modelValue = ref(false)

const titleOpt = {
  1: "采购在途",
  2: "锁定库存",
  3: "可用库存",
}
// const title = ref("")
// const props = defineProps({
//   DocumentTypeEnum: { type: Object, default: () => ({}) },
// })
// const emit = defineEmits(['close', 'success'])
const data = reactive({
  loading: false,
  queryForm: {},
})
const { loading, queryForm } = toRefs(data)

const tableRef = ref()

const tableOptions = reactive({
  border: true,
  height: 600,
  columns: [],
  pagerConfig: {},
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },

    ajax: {
      query: ({ page, form }) => {
        let params = {
          ...page,
          pageNum: page.currentPage,
          ...queryForm.value,
        }
        return ownerInventoryOrderDetail(params)
      },
    },
  },
})
const submit = () => {
  const checkboxRecords = tableRef.value.getCheckboxRecords()
  console.log(checkboxRecords)
  if (!checkboxRecords.length) {
    return ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
  }

  let params = {
    diff_document: checkboxRecords.map((v) => ({
      order_number: v.order_no,
      document_type: queryForm.value.document_type,
      quantity: v.transit_quantity,
      diff_quantity: v.diff_quantity,
    })),
  }
  basicInventoryCreateDiffDocument(params).then((res) => {
    emit("handleClose")
    handleClose()
  })
}
const handleClose = () => {
  modelValue.value = false
}

const tableColumns = ref({
  1: [
    { type: "checkbox", fixed: "left", width: 100, slots: { header: ({ row }) => <div>计算差异数</div> } },
    { title: "单号", slots: { default: ({ row }) => <VText value={row.order_no} line={1} type="link" /> } },
    { field: "transit_status", title: "状态", width: 80 },
    { field: "transit_quantity", title: "数量", width: 80 },
    { field: "transit_shelve_quantity", title: "上架数量", width: 80 },

    {
      title: "物流信息",
      slots: {
        default: ({ row }) => (
          // 签收 送货
          <div>
            <VText value={row.transit_sign_time || ""} line={1} />
            <VText value={row.transit_receive_time || ""} line={1} />
          </div>
        ),
      },
    },
    { title: "差异数", slots: { default: ({ row }) => <el-input v-model={row.diff_quantity} placeholder="请输入" /> } },
  ],
  2: [
    { type: "checkbox", fixed: "left", width: 100, slots: { header: ({ row }) => <div>计算差异数</div> } },
    { title: "单号", slots: { default: ({ row }) => <VText value={row.order_no} line={1} type="link" /> } },
    { field: "transit_status", title: "状态", width: 80 },
    { field: "transit_quantity", title: "数量", width: 80 },
    { title: "差异数", slots: { default: ({ row }) => <el-input v-model={row.diff_quantity} placeholder="请输入" /> } },
  ],

  3: [
    { type: "checkbox", fixed: "left", width: 100, slots: { header: ({ row }) => <div>计算差异数</div> } },
    { title: "单号", slots: { default: ({ row }) => <VText value={row.order_no} line={1} type="link" /> } },
    // { field: "transit_status", title: "状态", width: 80 },
    // { field: "transit_quantity", title: "数量", width: 80 },
    // { title: "差异数", slots: { default: ({ row }) => <el-input v-model={row.diff_quantity} placeholder="请输入" /> } },

    { field: "transit_status", title: "差异数", width: 80 },
    { field: "transit_status", title: "添加人", width: 80 },
    { field: "create_time", title: "添加时间", width: 180 },
    { field: "transit_status", title: "备注", width: 80 },
  ],
})

// {value: 1, label: "在途"}
// {value: 2, label: "锁库"}
// {value: 3, label: "可用"}
const open = (params = {}, type = "") => {
  modelValue.value = true
  console.log(params)
  console.log(type)
  queryForm.value = {
    country: params.country,
    warehouse_id: params.warehouse_id,
    sku: params.sku,
    asin: params.asin,
    owner_id: params.owner_id,

    document_type: type,
    inv_type: type == 1 ? "transit" : "lock",
  }
  let columns = []

  nextTick(() => {
    tableRef?.value?.loadColumn(tableColumns.value?.[type] || [])

    tableRef.value.commitProxy("reload")
  })
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>
